<template>
    <div class="request-self-config">
        <a-divider/>
        <setting-item-box name="地址">
            <setting-item name="请求方式 & URL 地址">
                <a-input-group compact>
                    <a-select style="width: 20%;" v-model:value="requestHttpType">
                        <a-select-option 
                            v-for="i in selectTypeOptions"
                            :value="i.value">
                            {{ i.label }}
                        </a-select-option>
                    </a-select>
                    <a-input v-model:value="requestUrl" style="width: 80%" :addon-before="requestOriginUrl"/>
                </a-input-group>
            </setting-item>
            <setting-item name="更新间隔">
                <a-input-group compact>
                    <a-input v-model:value="requestInterval" style="width: 80%" />
                    <a-select style="width: 20%;" v-model:value="requestIntervalUnit">
                        <a-select-option 
                            v-for="i in selectTimeOptions"
                            :value="i.value">
                            {{ i.label }}
                        </a-select-option>
                    </a-select>
                </a-input-group>
            </setting-item>
        </setting-item-box>
        <setting-item-box name="选择方式" :alone="true">
            <a-tabs v-model:activeKey="requestContentType" >
                <a-tab-pane :key="RequestContentTypeEnum.DEFAULT" tab="普通请求">
                    <a-tabs v-model:activeKey="tabValue">
                        <!-- 处理params参数 -->
                        <a-tab-pane :key="RequestParamsTypeEnum.PARAMS" :tab="RequestParamsTypeEnum.PARAMS">
                            <request-header-table 
                                :target="tabValue === RequestParamsTypeEnum.BODY ? [] : requestParams[tabValue]"
                                @update="updateRequestParams"
                            />
                        </a-tab-pane>
                        <!-- 处理body体 -->
                        <a-tab-pane :key="RequestParamsTypeEnum.BODY" :tab="RequestParamsTypeEnum.BODY">
                            <a-radio-group v-model:value="requestParamsBodyType" class="mb-2">
                                <a-radio 
                                    v-for="bodyEnum in RequestBodyEnumList" 
                                    :key="bodyEnum"  
                                    :value="bodyEnum"
                                >
                                    {{ bodyEnum }}
                                </a-radio>
                            </a-radio-group>
                            <template v-if="requestParamsBodyType == RequestBodyEnum.NONE">
                                <a-card>
                                    该接口没有 Body 体
                                </a-card>
                            </template>
                            <template v-if="[RequestBodyEnum.FORM_DATA,RequestBodyEnum.X_WWW_FORM_URLENCODED].includes(requestParamsBodyType)">
                                <request-header-table 
                                    :target="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
                                    @update="updateRequestBodyTable"
                                />
                            </template>
                            <template v-if="requestParamsBodyType == RequestBodyEnum.JSON">
                                <editor
                                    :source="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
                                    :editorType="'json'"
                                    height="300px"
                                    @update="updateEditorVal"
                                />
                            </template>
                            <template v-if="requestParamsBodyType == RequestBodyEnum.XML">
                                <editor
                                    :source="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
                                    :editorType="'xml'"
                                    height="300px"
                                    @update="updateEditorVal"
                                />
                            </template>
                        </a-tab-pane>
                        <a-tab-pane :key="RequestParamsTypeEnum.HEADER" :tab="RequestParamsTypeEnum.HEADER">
                            <request-header-table 
                                :target="tabValue === RequestParamsTypeEnum.BODY ? [] : requestParams[tabValue]"
                                @update="updateRequestParams"
                            />
                        </a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
                <a-tab-pane :key="RequestContentTypeEnum.SQL" tab="SQL 请求">{{ RequestContentTypeEnum.SQL }}</a-tab-pane>
            </a-tabs>
        </setting-item-box>
    </div>
</template>

<script setup lang="ts">
import settingItemBox from '@/components/chart/settingItemBox/index.vue';
import settingItem from '@/components/chart/settingItemBox/settingItem.vue';
import { RequestBodyEnum, RequestBodyEnumList, RequestContentTypeEnum, RequestParamsTypeEnum, selectTypeOptions, type RequestParamsObjType } from '@/const';
import type { RequestConfigType } from '@/stores/types';
import { ref, toRefs, watchEffect } from 'vue';
import requestHeaderTable from '../requestHeaderTable/index.vue'
import editor from '@/components/editor/index.vue'
import { useDataViewStore } from '@/stores/dataview';
import { storeToRefs } from 'pinia';
import { selectTimeOptions } from '../requestGlobalConfig/types';

const props = withDefaults(defineProps<{
    targetDataRequest:RequestConfigType
}>(),{})

const dataviewStore = useDataViewStore()

const {requestOriginUrl} = toRefs(dataviewStore.getRequestGlobalConfig)
const {requestParamsBodyType,requestContentType,requestHttpType,requestUrl,requestInterval,requestIntervalUnit,requestParams} = toRefs(props.targetDataRequest)

const tabValue = ref(RequestParamsTypeEnum.PARAMS)


const updateRequestBodyTable = (paramsObj:RequestParamsObjType)=>{
    if(tabValue.value == RequestParamsTypeEnum.BODY && (
        requestParamsBodyType.value == RequestBodyEnum.FORM_DATA || 
        requestParamsBodyType.value == RequestBodyEnum.X_WWW_FORM_URLENCODED
    )){
        requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = paramsObj
    }
}

const updateRequestParams = (paramsObj:RequestParamsObjType)=>{
    if(tabValue.value != RequestParamsTypeEnum.BODY){
        requestParams.value[tabValue.value] = paramsObj
    }
}

const updateEditorVal = (val:any)=>{
    // @ts-ignore
    requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = val
}
</script>

<style lang='scss' scoped></style>